<!--
 * @Date: 2024-09-05 09:25:38
 * @Author: Yu Weifeng weifeng.yu@gientech.com
 * @Description: echarts基类
-->
<template>
  <div ref="chartRef" v-displayed="handleDisplayed" class="lc-chart">
    <el-dialog
      :title="chartOptions.title?.text || ''"
      v-model="zoomupDlgVisible"
      append-to-body
      :fullscreen="true"
      @opened="handleZoomupDisplayed"
      @close="handleZoomupClosed"
    >
      <div ref="zoomupChartRef" style="width: calc(100vw - 40px); height: calc(100vh - 135px)" />
    </el-dialog>
  </div>
</template>
<script setup>
import { ref, unref, toRaw, onMounted, onUnmounted, watch } from 'vue';

defineOptions({
  name: 'ChartBase'
});

const props = defineProps({
  options: {
    type: Object,
    default: () => {}
  },
  currentEcharts: {
    type: Object,
    default: () => null
  }
});

/**
 * 放大工具
 */
const zoomupDlgVisible = ref(false);
const zoomupChartRef = ref(null);
let zoomupChartInstance = null;
const showZoomup = () => {
  zoomupDlgVisible.value = true;
};
const handleZoomupDisplayed = () => {
  if (!zoomupChartInstance) {
    zoomupChartInstance = props.currentEcharts.init(unref(zoomupChartRef));
  }
  zoomupChartInstance.setOption(
    Object.fromEntries(Object.entries(chartOptions).filter(([key, value]) => key !== 'toolbox')),
    true
  );
};
const handleZoomupClosed = () => {
  zoomupChartInstance && zoomupChartInstance.dispose();
  zoomupChartInstance = null;
};

const chartRef = ref(null);
let chartInstance = null;
let chartOptions = null;

const handleWindowResize = () => {
  chartInstance && chartInstance.resize();
};
onMounted(() => {
  window.addEventListener('resize', handleWindowResize);
});
onUnmounted(() => {
  window.removeEventListener('resize', handleWindowResize);
  chartInstance && chartInstance.dispose();
  chartInstance = null;
});

const handleDisplayed = () => {
  if (!chartInstance) {
    chartInstance = props.currentEcharts.init(unref(chartRef));
    preRenderChart();
  }
};

const renderChart = () => {
  chartInstance && chartOptions && chartInstance.setOption(chartOptions, true);
};
// 工具
const feature = {
  myZoomup: {
    show: true,
    title: '查看',
    onclick: showZoomup,
    icon: 'path://M904.358621 343.844186l-71.980381-71.980381-184.411033 184.440709-80.244602-80.274278L752.133637 191.619202l-71.980381-71.980381c0-30.953989 25.069979-56.051597 56.050574-56.051597l168.153768 0c30.983665 0 56.053644 25.097608 56.053644 56.051597l0 168.153768C960.412264 318.746578 935.342286 343.844186 904.358621 343.844186zM343.844697 904.360156c0 30.953989-25.125237 56.050574-56.051597 56.050574L119.639333 960.41073c-30.982642 0-56.05262-25.096585-56.05262-56.050574L63.586712 736.206388c0-30.953989 25.069979-56.050574 56.05262-56.050574l71.979358 71.980381 184.412057-184.440709 80.245625 80.274278L271.863293 832.40638 343.844697 904.360156z'
  }
};
// 添加工具配置项
const addToolbox = (chartOptions) => {
  if (chartOptions.toolbox) {
    Object.keys(chartOptions.toolbox.feature).forEach((tool) => {
      chartOptions.toolbox.feature[tool] = {
        ...feature[tool],
        ...chartOptions.toolbox.feature[tool]
      };
    });
  }
  return chartOptions;
};
const preRenderChart = () => {
  if (Object.keys(props.options).length && !chartOptions) {
    chartOptions = addToolbox(toRaw(props.options));
  }
  renderChart();
};

watch(
  () => props.options,
  () => {
    preRenderChart();
  },
  {
    immediate: true
  }
);
</script>
<style lang="scss">
@use '@/assets/styles/mixin.scss';
.lc-chart {
  @include mixin.createCssFromWidthHeightStyle('&');
  @include mixin.createCssByAttributesGroup('&', aspect-ratio);
  @include mixin.createCssByAttributesGroup('&', max-width);
}
</style>
